<template>
	<ul class="ui-select" :style="style" :class="[classname,size,disabledClass]">
		<li class="ui-select-head" @click.prevent="click2" @mouseover.prevent.self="mouseover">
			<input :readonly="isread" class="ui-select-selected" v-model="label" @input="search" @change="setText" :placeholder="placeholder" type="text" />
			<input type="hidden" v-model="value" :name="name"/>
			<span class="ui-select-icon" v-if="icon"></span>
		</li>
		<li class="ui-select-list" :class="listShow">
			<a href="javascript:" class="ui-select-option" :class="v.ison" v-show="!v.ishide" @click="click" v-for="v in options" :val="v.value">{{v.label}}</a>
		</li>
	</ul>
</template>

<script>
	/*
	组件属性[
		options:[//列表数据
			{label:'key1',value:"1"},
			{label:'key2',value:"2"}
		],
		value:2//列表选中值
		style:自定义样式
		class:自定义class
		name:表单name
		icon:是否显右侧向下图标,true(默认)/false,为false时，单击不会显示下拉列表，输入内容后有匹配结果才显示
		readonly：是否可输入搜索
		size:按钮尺寸 big,normal(默认),small,mini
		placeholder:默认值，没有选中值时显示，value设置为null
		update:动态改变列表的父方法名（返回数据与options格式相同），可输入状态下有效,callback(obj[当前实例])
		disabled:禁用下拉框
		rules:用于表单验证
			[
				empty:[true/false,"提示信息"],
				int:[true/false,"提示信息"],
				min:[200,"提示信息"],
				...
			]

		//eg:<ui-select :data="selectData" @change="change2" update="update"></ui-select>
	]
	组件自定义事件[
		change:选项发生改变时回调的父组件方法，callback(obj[当前实例])
	]
	*/


	export default{
		props:{
			"value":{type:null,default:null},
			'options':{type:Array,default:[]},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'size':{type:String,default:'normal'},
			'name':{type:String,default:""},
			"readonly":{type:Boolean,default:true},
			'disabled':{type:Boolean,default:false},
			'update':{type:String,default:""},
			'icon':{type:Boolean,default:true},
			'rules':{type:Array,default:[]},
		},
		data(){
			return{
				uiType:"ui-select",
				listShow:"",
				label:"",
				init:false,
				disabledClass:this.disabled?"disabled":""
			}
		},
		computed:{
			isread(){
				if(!this.icon)return "";
				if(this.disabled)return "readonly";
				return this.readonly;
			}
		},
		created(){
			if(!this.value && this.options && this.options[0]){
			    this.value=this.options[0].value;
			    this.setText();
            }
		},
		methods:{
			setText(){
				var res=[];
				if(this.value){
					for(let i=0;i<this.options.length;i++){
						if(this.options[i].value==this.value){
							res.push(this.options[i].label);
							this.options[i].ison="selected";
						}else{
							this.options[i].ison="";
						}
						if(this.init){
							this.options[i].ishide=false;
							this.init=true;
						}
					}
					if(res.length==0){
						this.value="";
					}
				}else if(!this.placeholder){
					res.push('请选择');
				}
				this.label=res[0];
			},
			click(event){//单击选项
				this.value=event.currentTarget.getAttribute('val');
				this.setText();
				this.hide();
				this.$emit('change',this);//回调

				let list=this.options;
				setTimeout(function(){
					for(let i=0;i<list.length;i++){
						list[i].ishide=false;
					}	
				},100);
			},
			click2(){//显示列表
				if(this.icon && !this.disabled && this.options){
					this.listShow?this.hide():this.show();
				}
			},
			show(){
				if(this.options.length!=0 && !this.disabled)this.listShow="on";
			},
			hide(){
				this.listShow="";
			},
			search(event){
			    //匹配输入结果
				if(this.update){
					this.options=this.update(this);
				}
				let val=event.currentTarget.value;
				let list=this.options;
				for(let i=0;i<list.length;i++){
					list[i].ishide=list[i].label.indexOf(val)>-1?false:true;
				}
				this.show();
			},
			mouseover(){
				this.$emit('mouseover',this);//回调
			}
		}
	}
</script>
